<template>
  <div>
    <!-- 商家 -->
    <div class="individual_box">
      <!-- 地区 -->
      <div>
        <span>选择城市:</span>

        <div>
          <picker mode="region" @change="cityPickerChange" :value="region" :custom-item="customItem">
            <div class="picker">
              <view class="" v-if="regionCode.length > 0">
                {{region[0]}}，{{region[1]}}，{{region[2]}}
              </view>
              <view class="" v-else>
                {{cityname}}
              </view>
              <view>></view>
            </div>
          </picker>
        </div>
      </div>
      <!-- 姓名 -->
      <div>
        <span>单位名称:</span>
        <div>
          <input @input="onKeyCompany" type="text" placeholder="请输入单位名称" />
        </div>
      </div>
      <!-- 法人 -->
      <div>
        <span>法人代表:</span>
        <div>
          <input @input="onKeyName" type="text" placeholder="请输入法人代表名字" />
        </div>
      </div>
      <!-- 电话 -->
      <div>
        <span>电 话:</span>
        <div>
          <input @input="onKeyPhone" type="number" placeholder="请输入联系电话" />
        </div>
      </div>
    </div>
    <div class="individual_box">
      <!-- 地址 -->
      <div>
        <span>联系地址:</span>
        <div>
          <input @input="onKeyAddress" type="text" placeholder="请输入联系地址" />
        </div>
      </div>
      <!-- 工作类型 -->
      <div>
        <span>所属行业:</span>
        <div>
          <picker @change="bindPickerChange" :value="bindIndex" :range="array">
            <div class="picker">
              <view class="">
                {{bindIndex?array[bindIndex]:nullname}}
              </view>
              <view>></view>
            </div>
          </picker>
        </div>
      </div>
      <!-- 营业执照号码 -->
      <div>
        <span>营业执照号码:</span>
        <div>
          <input @input="onKeyLicence" type="number" placeholder="请输入营业执照号码" />
        </div>
      </div>
    </div>

    <!-- 协议 -->
    <div class="individual_identity">
      <p>门头照</p>
      <div @tap="chooseImg1()">
        <div v-if="imageFile1 == ''">
          <p class="tup">+</p>
        </div>
        <div v-else>
          <img class="tup" :src="imageFile1" />
        </div>
      </div>
    </div>
    <!-- 协议 -->
    <div class="individual_identity">
      <p>营业执照</p>
      <div @tap="chooseImg2()">
        <div v-if="imageFile2 == ''">
          <p class="tup">+</p>
        </div>
        <div v-else>
          <img class="tup" :src="imageFile2" />
        </div>
      </div>
    </div>
    <!-- 协议 -->
    <div class="individual_identity">
      <p>协议上传<span>（协议模版下载）</span></p>
      <div @tap="chooseImg3()">
        <div v-if="imageFile3 == ''">
          <p class="tup">+</p>
        </div>
        <div v-else>
          <img class="tup" :src="imageFile3" />
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <div class="individual_bottom">
      <p>提交注册即表示您已阅读并同意<span>《师傅入住协议》</span></p>
      <div @click="onRegister()">同意协议并注册</div>
      <div><span>联系平台:</span><span>400-8888-8888</span></div>
    </div>
  </div>
</template>

<script>
export default {
  props: {},
  data() {
    return {
      inputCompany: '',
      inputName: '',
      inputPhone: '',
      inputAddress: '',
      inputLicence: '',
      // 下拉框数据
      region: ['湖北省', '武汉市', '洪山区'],
      regionCode: [],
      customItem: '全部',
      cityname: '请选择城市',
      cityIndex: 0,
      array: ["行业一", "行业二", "行业三", "行业四"],
      arrayText: '',
      bindIndex: 0,
      nullname: '请选择所属行业',
      imageFile1: '',
      imageFile2: '',
      imageFile3: ''
    };
  },
  computed: {},
  created() {},
  mounted() {},
  watch: {},
  methods: {
    onKeyCompany: function(event) {
      this.inputCompany = event.target.value
    },
    onKeyName: function(event) {
      this.inputName = event.target.value
    },
    onKeyPhone: function(event) {
      this.inputPhone = event.target.value
    },
    onKeyAddress: function(event) {
      this.inputAddress = event.target.value
    },
    onKeyLicence: function(event) {
      this.inputLicence = event.target.value
    },
    cityPickerChange: function(e) {
      // console.log('picker发送选择改变，携带值为', e.mp.detail.value)
      this.region = e.mp.detail.value
      this.regionCode = e.mp.detail.code
      console.log(this.regionCode)
    },
    bindPickerChange: function(e) {
      // console.log('picker发送选择改变，携带值为', e.mp.detail.value)
      this.bindIndex = e.mp.detail.value
      this.arrayText = this.array[this.bindIndex]
    },
    /** 门头照 */
    chooseImg1: function () {
      var that = this
      wx.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
        success: function (res) {
          var tempFilePaths = res.tempFilePaths
          // that.setData({
          //   tempFilePaths: res.tempFilePaths
          // })s
          // that.globalData.tempFilePaths = res.tempFilePaths
          // console.log(res.tempFilePaths)
          wx.setStorage({ 
            key: "card", 
            data: tempFilePaths[0] 
          })
          that.formSubmit1()
        }
      })
    },
    formSubmit1: function (e) {
      var that = this
      var card = wx.getStorageSync('card')
      // console.log(card)
      wx.uploadFile({
        url: that.baseUrl + '/api/upload/file',
        filePath: card,
        name: 'file',
        formData: {
        },
        success: function (res) {
          // console.log(res)
          card = JSON.parse(res.data)
          // console.log(JSON.parse(res.data))
          if(card.status == 200){
            that.imageFile1 = card.data.url
            // console.log(card.data.url)
          } else {
            return false
          }
        }
      })
    },
    /** 营业执照 */
    chooseImg2: function () {
      var that = this
      wx.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
        success: function (res) {
          var tempFilePaths = res.tempFilePaths
          // that.setData({
          //   tempFilePaths: res.tempFilePaths
          // })s
          // that.globalData.tempFilePaths = res.tempFilePaths
          // console.log(res.tempFilePaths)
          wx.setStorage({ 
            key: "card", 
            data: tempFilePaths[0] 
          })
          that.formSubmit2()
        }
      })
    },
    formSubmit2: function (e) {
      var that = this
      var card = wx.getStorageSync('card')
      // console.log(card)
      wx.uploadFile({
        url: that.baseUrl + '/api/upload/file',
        filePath: card,
        name: 'file',
        formData: {
        },
        success: function (res) {
          // console.log(res)
          card = JSON.parse(res.data)
          // console.log(JSON.parse(res.data))
          if(card.status == 200){
            that.imageFile2 = card.data.url
            // console.log(card.data.url)
          } else {
            return false
          }
        }
      })
    },
    /** 协议上传 */
    chooseImg3: function () {
      var that = this
      wx.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
        success: function (res) {
          var tempFilePaths = res.tempFilePaths
          // that.setData({
          //   tempFilePaths: res.tempFilePaths
          // })s
          // that.globalData.tempFilePaths = res.tempFilePaths
          // console.log(res.tempFilePaths)
          wx.setStorage({ 
            key: "card", 
            data: tempFilePaths[0] 
          })
          that.formSubmit3()
        }
      })
    },
    formSubmit3: function (e) {
      var that = this
      var card = wx.getStorageSync('card')
      // console.log(card)
      wx.uploadFile({
        url: that.baseUrl + '/api/upload/file',
        filePath: card,
        name: 'file',
        formData: {
        },
        success: function (res) {
          // console.log(res)
          card = JSON.parse(res.data)
          // console.log(JSON.parse(res.data))
          if(card.status == 200){
            that.imageFile3 = card.data.url
            // console.log(card.data.url)
          } else {
            return false
          }
        }
      })
    },
    onRegister() {
      var that = this;
      if (!that.regionCode.length > 0) {
        wx.showToast({
          title: "请选择城市",
          icon: "none",
          duration: 2000,
        });
        return false;
      }
      if (!that.inputCompany.trim()) {
        wx.showToast({
          title: "请输入单位名称",
          icon: "none",
          duration: 2000,
        });
        return false;
      }
      if (!that.inputName.trim()) {
        wx.showToast({
          title: "请输入法人姓名",
          icon: "none",
          duration: 2000,
        });
        return false;
      }
      if (!/^1[3456789]\d{9}$/.test(that.inputPhone)) {
        wx.showToast({
          title: "请输入正确手机号",
          icon: "none",
          duration: 2000,
        });
        return false;
      }
      if (!that.inputAddress.trim()) {
        wx.showToast({
          title: "请输入详细地址",
          icon: "none",
          duration: 2000,
        });
        return false;
      }
      if (!that.inputLicence.trim()) {
        wx.showToast({
          title: "请输入营业执照号码",
          icon: "none",
          duration: 2000,
        });
        return false;
      }
      // if (!/^\d{17}(\d|x)$/i.test(that.inputIdcard)) {
      //   wx.showToast({
      //     title: "请输入正确身份证号码",
      //     icon: "none",
      //     duration: 2000,
      //   });
      //   return false;
      // }
      if (!that.arrayText) {
        wx.showToast({
          title: "请选择所属类型",
          icon: "none",
          duration: 2000,
        });
        return false;
      }
      that.request({
          url: that.baseUrl + "/api/wechatapp/userinfo",
          data: {
            openid: wx.getStorageSync("openid"),
            type_user: 2, // 类型 1个人 2公司
            codes: that.regionCode, // 选择省市区
            company: that.inputCompany, // 单位名称
            user_name: that.inputName, // 法人姓名
            mobile: that.inputPhone, // 手机号
            address: that.inputAddress, // 详细地址
            work_type_id: that.arrayText, // 所属类型
            licence_num: that.inputLicence,
            logo: that.imageFile1,
            licence: that.imageFile2,
            contract: that.imageFile3,
          },
          method: "POST",
        })
        .then((result) => {
          console.log(result);
          if (result.status == 200) {
            wx.showToast({
              icon: "success",
              title: "注册成功",
              duration: 1000,
              success: function () {
                setTimeout(function () {
                  that.request({
                      url: that.baseUrl + "/api/wechatapp/login",
                      data: {
                        login_type: 2,
                        openid: wx.getStorageSync("openid"),
                      },
                      method: "POST",
                    })
                    .then((result) => {
                      console.log(result);
                      if (result.status == 200) {
                        wx.reLaunch({
                          //跳转到小程序首页
                          url: "/pages/signin/main",
                        });
                      } else {
                        return false;
                      }
                    });
                }, 1000);
              },
            });
          } else {
            wx.showToast({
              title: result.msg,
              icon: "none",
            });
          }
        });
    },
  },
  components: {},
};
</script>

<style scoped >
.individual_box {
  margin: 20rpx 0;
  /* padding: 0 20rpx; */
  background: #ffffff;
}
.individual_box > div {
  display: flex;
  padding: 30rpx;
  border-bottom: 2rpx solid #f5f6fa;
}
.individual_box > div > div:nth-child(2) {
  flex: 2;
  color: #878b99;
}
.individual_box > div > span {
  flex: 1;
}
.picker {
  display: flex;
  justify-content: space-between;
}
.individual_identity p {
  margin: 30rpx;
  color: #888888;
}
.individual_identity > div:nth-child(2) {
  background: #ffffff;
  display: flex;
}
.individual_identity img {
  width: 276rpx;
  height: 178rpx;
  margin: 30rpx;
}
.null {
  display: flex;
  flex-direction: column;
  text-align: center;
}
.null span {
  padding-bottom: 20rpx;
}
.tup {
  width: 144rpx;
  height: 144rpx;
  line-height: 128rpx;
  text-align: center;
  border: 2rpx solid #cccccc;
  font-size: 121rpx;
  color: #cccccc;
}
.individual_identity > p:nth-child(1) span {
  color: #1677ff;
}
.individual_bottom {
  text-align: center;
  /* margin-bottom: 200rpx; */
}
.individual_bottom p {
  margin: 100rpx 0 10rpx 0;
  color: #878b99;
}
.individual_bottom p > span {
  color: #1677ff;
}
.individual_bottom > div:nth-child(2) {
  width: 686rpx;
  height: 88rpx;
  line-height: 88rpx;
  margin: 0 auto;
  background: #1677ff;
  color: #ffffff;
  border-radius: 10rpx;
}
.individual_bottom > div:nth-child(3) > span:nth-child(2) {
  color: #1677ff;
}
.individual_bottom > div:nth-child(3) {
  margin: 20rpx;
}
</style>
